.project
  header
    .score
      @extend .is-size-5, .has-text-right

  .description
    @extend .has-text-grey
    padding: 0.75rem

.metrics
  @extend .columns, .is-multiline
  display: flex
  strong
    @extend .is-size-5

  .label
    @extend .column, .is-2-tablet, .is-12-mobile
    align-self: flex-end
    margin-bottom: 0


  .metric
    @extend .column, .is-3-tablet, .is-6-mobile
    // Align content to bottom
    align-self: flex-end
    strong
      // Compensate for default icon padding in heading above
      margin-left: 5px
      a
        color: $black-ter

    .heading
      font-weight: bold
      a
        color: $grey-darker

  &.compact
    .metric
      @extend .is-half, .is-one-third-desktop

.project-links
  a.button
    transition: color 100ms linear

    &:hover
      color: $primary


.project-compact-cards
  @extend .columns, .is-multiline
  .item
    @extend .column, .is-full, .is-half-tablet
    // When displayed next to each other, the wrapping box should
    // stretch to equal height to its row sibling
    display: flex
    .project
      width: 100%
      // When displayed in a row next to each other the description
      // row should stretch to the full height so metrics in equal-
      // height siblings are bottom-aligned
      display: flex
      flex-direction: column
      align-items: stretch
      align-content: stretch
      .stretch
        flex: 1
